<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页布局</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    a {
        text-decoration: none;
    }

    p {
        text-align: center;
    }

    .header {
        padding: 0 40px;
        height: 70px;
        position: relative;
        z-index: 2;
        overflow: hidden;
    }

    .headerLogo {
        position: relative;
        top: 20px;
        left: 0;
    }

    .logo {
        display: inline-block;
        width: 144px;
        height: 32px;
        background: url(../img/163logo.png) 50% no-repeat;
        background-size: auto;
        background-size: 100% 100%;
    }

    .headertitle {
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        width: 156px;
        display: block;
        position: absolute;
        top: 20px;
        left: 204px;
        border-left: 1px solid #ccc;
        color: #888;
    }

    .headerNav {
        position: absolute;
        top: 27px;
        right: 40px;
        text-align: right;
        line-height: 17px;
        color: #666;
        font-size: 12px;
    }

    .headerNav a {
        color: #666;
        font-size: 12px;
        padding-left: 12px;
        display: inline-block;
        vertical-align: middle;
    }

    .headerNav a.separation-line::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        margin-top: -2px;
        margin-left: 12px;
        width: 1px;
        height: 12px;
        background-color: #c2c2c2;
        font-size: 0;
    }

    .main {
        width: 100%;
        height: 640px;

        background: url("https://mail-activity.nosdn.127.net/1441a475-7cf9-4e8e-972e-5584f6ec1030") center no-repeat;
    }

    .theme {
        position: relative;
        margin: 0 auto;
        height: 640px;
        width: 1100px;
        overflow: hidden;
    }

    .Login {
        width: 400px;
        height: 540px;
        top: 50px;
        right: 50px;
        text-align: left;
        position: absolute;
        z-index: 2;
        background: #fff;
        border-radius: 4px;
        background-image: linear-gradient(-180deg, #fff, #f4f4f4);
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
    }

    .new-loginFunc {
        position: absolute;
        right: 12px;
        top: 12px;
        width: 46px;
        height: 46px;
        z-index: 2;
        cursor: pointer;
    }

    .loginIcon {
        display: inline-block;
        vertical-align: middle;
        width: 50px;
        height: 50px;
        background: url(../img/login.png) 50% no-repeat;
        background-size: 100% 100%;
    }

    .loginForm {
        height: 100%;
        padding: 0;
        border-radius: 4px;
    }

    .loginForm .loginbox-title {
        padding: 40px 0 0;
        color: #333;
        font-size: 20px;
        line-height: 28px;
        text-align: center;
    }
</style>

<body>
    <div class="header">
        <div class="headerLogo">
            <div class="logo"></div>
        </div>
        <p class="headertitle">中文邮箱第一品牌</p>
        <div class="headerNav">
            <a rel="noopener norefferrer" href="https://qiye.163.com/?from=M163_LOGIN" target="_blank">企业邮箱</a>
            <a rel="noopener norefferrer" href="https://vipmail.163.com/?from=fmail" target="_blank">VIP邮箱</a>
            <a rel="noopener norefferrer" href="https://v.mail.163.com/?utm_source=163loginnav" target="_blank">邮箱会员</a>
            <a rel="noopener norefferrer" href="https://hw.mail.163.com/#163">海外用户登录</a>
            <a rel="noopener norefferrer" href="https://mail.163.com/dashi/dlpro.html?from=mail11"
                class="separation-line" target="_blank">官方App</a>
            <a rel="noopener norefferrer" href="https://help.mail.163.com" target="_blank">帮助</a>
            <a rel="noopener norefferrer" href="https://help.mail.163.com/newfeedback.do?m=add&id=31"
                target="_blank">登录反馈</a>
        </div>
    </div>
    <div class="main" style="background-color:rgb(237, 193, 166);">
        <div class="theme">
            <a style="position: absolute; width: 650px; height: 640px; left: 0px;top: 0px;cursor: pointer; "
                href="http://r.mail.163.com/r.jsp?url=https%3A%2F%2Fv.mail.163.com%2F%3Futm_source%3DLoginBackgroundShow&sign=382509957&_r_ignore_statId=1_16_191_2399&position=0&_r_ignore_moduleId=16&_r_ignore_uid=nt@163.com"
                target="_blank" hidefocus="true" ;></a>
            <div class="Login">
                <div class="new-loginFunc">
                    <div class="loginIcon"></div>
                </div>
                <div class="loginForm" style="display:block;">
                    <h2 class="loginbox-title">邮箱账号登录</h2>
                    <div class="loginWrap">

                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

</html>